<template>
  <el-dialog
    append-to-body
    :visible.sync="visible"
    :before-close="beforeClose"
    top="30px"
    width="80%"
    title="产业报告"
    :close-on-click-modal="false"
  >
    <table class="table table-bordered text-center table-vertical-middle mb-0">
      <thead>
        <tr>
          <th width="15%">产业名称</th>
          <th width="15%">适用区域</th>
          <th width="15%">项目规模</th>
          <th width="20%">政策报告</th>
          <th width="15%">报告详情</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!tableData.length">
          <td colspan="6" class="text-muted">暂无数据</td>
        </tr>
        <tr v-for="(p, index) of tableData" :key="index">
          <td>{{ p.load_name }}</td>
          <td>{{ p.supply_address_code_name | substr(15) }}</td>
          <td>{{ p.scale || '' }}{{ p.uscale || '' }}</td>
          <td class="text-left">
            <ul class="list-unstyled">
              <li v-for="(report, index) in p.reportUrls" :key="index">
                <a :href="report.url" :title="report.name" target="_blank" download="download">
                  <div class="text-truncate">{{ report.name }}</div>
                </a>
              </li>
            </ul>
          </td>
          <td>
            <el-button type="text" @click="handleView(p)">详情</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <goods-view-dialog
      :visible.sync="viewFormVisible"
      :goods-data="viewFormData"
    ></goods-view-dialog>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPolicyFilterAddress, dataAdapter } from '@/credit/views/province/goods/goodsMixins'
import GoodsViewDialog from '@/credit/views/province/goods/GoodsViewDialog'

export default {
  components: {
    GoodsViewDialog,
  },
  props: {
    visible: Boolean,
  },
  data() {
    return {
      params: {
        index: 1,
        size: 10,
        'is_approval.eq': 1,
        'is_industrial_package.eq': 1,
        subKey: 'industrial_package_policy.industrial_package_id',
      },
      tableCount: 0,
      tableData: [],
      viewFormData: {},
      viewFormVisible: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'enumCategory']),
    policyFilterAddress() {
      return getPolicyFilterAddress(this.user.queryAddressCode)
    },
  },
  watch: {},
  mounted() {},
  created() {
    this.getData()
  },
  methods: {
    handleView(row = {}) {
      this.viewFormData = { ...row }
      this.viewFormVisible = true
    },
    async getData() {
      await this.$store.dispatch('getEnumCategory')

      this.loading = true
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, 'industrial_package', this.params)
      )
      this.loading = false

      const data = (res && res.data) || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
    },
    dataAdapter(item) {
      return dataAdapter(item, this.enumCategory, this.policyFilterAddress)
    },
    beforeClose() {
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.table-vertical-middle td {
  vertical-align: middle;
}
.text-truncate {
  max-width: 180px;
}
</style>
